<template>
  <!-- 顶部导航栏 -->
  <van-sticky>
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="returnTo" />
  </van-sticky>

  <!-- 内容区 -->
  <div class="sub-order-view">
    <!-- 地址 -->
    <div class="address" @click="router.push({ path: '/addressChoose' })">
      <van-row :align="'center'">
        <van-col span="22">
          <van-row :gutter="[0, 20]">
            <van-col span="12">{{ userStore.nowAddress.name }}</van-col>
            <van-col span="12">{{ userStore.nowAddress.tel }}</van-col>
            <van-col span="24" style="font-size: 13px; color: #333;">{{ userStore.nowAddress.address }}</van-col>
          </van-row>
        </van-col>
        <van-col span="1"><van-icon name="arrow" size="20" /></van-col>
      </van-row>
    </div>
    <!-- 确认订单商品 -->
    <order-goods v-for="item in userStore.SettlementList" :SettlementData="item"></order-goods>
    <van-cell-group>
      <van-cell title="红包" value="0个可用" is-link />
      <van-cell title="代金券" value="红包和代金券不能同时用" is-link />
    </van-cell-group>
    <!-- 备注与总金额 -->
    <div>
      <van-cell-group>
        <van-field v-model="message" rows="2" autosize label="备注" type="textarea" maxlength="50" placeholder="请输入备注"
          show-word-limit />
      </van-cell-group>
      <!-- 商品总金额和实付总金额 -->
      <van-cell-group>
        <van-cell title="商品总金额" :value="'￥' + totalPrice" />
        <van-cell title="实付金额" :value="'￥' + totalPrice" />
      </van-cell-group>
      <!-- 选择支付方式 -->
      <van-radio-group v-model="checked">
        <van-cell-group>
          <van-cell :title="'余额支付：' + userStore.Wallet" clickable icon="bag" size="large">
            <template #right-icon>
              <van-radio name="1" @click="checked = '1'" />
            </template>
          </van-cell>
          <van-cell title="微信" clickable icon="wechat">

            <template #right-icon>
              <van-radio name="2" @click="checked = '2'" />
            </template>
          </van-cell>
          <van-cell title="支付宝" clickable icon="alipay">

            <template #right-icon>
              <van-radio name="3" @click="checked = '3'" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>
      <!-- 确认订单 -->
      <van-submit-bar :price="totalPrice * 100" button-text="提交订单" @click="submitOrder" />
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入
import { useUserStore } from '../store';
import { postOrderDate, getWalletDate } from '../api';
// 创建实例
const userStore = useUserStore()
const router = useRouter();
//创建响应式变量
let message = ref();
let totalPrice = ref();
let checked = ref("1");
//获取钱包余额
userStore.getWallet({ status: "change", token: localStorage.getItem("token"), number: 0 });

onMounted(async () => {
  //获取结算订单
  await userStore.getSettlementList({ status: "getsettlement", userId: localStorage.getItem("token") });
  //计算总价
  let sum = 0;
  userStore.SettlementList.forEach(item => {
    sum += Number(item.goods_number) * item.price
  })
  totalPrice.value = sum
  //获取地址与当前地址
  await userStore.getAddress({ status: "getAddress", userId: localStorage.getItem("token") });
  userStore.getNowAddress();
  console.log(userStore.nowAddress);
})


let returnTo = () => {
  router.back();
}

//提交订单,把订单全部提交到数据库
let submitOrder = async () => {
  // 如果余额不足，跳转到钱包充值
  if (userStore.Wallet < totalPrice.value) {
    await getWalletDate({ status: "change", token: localStorage.getItem("token"), number: 0 });
    userStore.SettlementList.forEach(item => {
      postOrderDate({
        status: "add",
        goodsName: item.goods_name,
        goodsNumber: item.goods_number,
        goodsthumb: item.goods_thumb,
        name: userStore.nowAddress.name,
        orderAddress: userStore.nowAddress.address,
        orderRemark: message.value,
        price: item.price,
        statu: 0,
        tel: userStore.nowAddress.tel,
        token: localStorage.getItem("token"),
      })
    })
    router.push("/wallet")
    return
  }
  //如果余额充足，跳转到订单页面查看订单
  // 扣钱
  await getWalletDate({ status: "change", token: localStorage.getItem("token"), number: -totalPrice.value });
  //发送数据
  userStore.SettlementList.forEach(item => {
    postOrderDate({
      status: "add",
      goodsName: item.goods_name,
      goodsNumber: item.goods_number,
      goodsthumb: item.goods_thumb,
      name: userStore.nowAddress.name,
      orderAddress: userStore.nowAddress.address,
      orderRemark: message,
      price: item.price,
      statu: 1,
      tel: userStore.nowAddress.tel,
      token: localStorage.getItem("token"),
    })
  })
  router.push("/order")
}

</script>

<style scoped>
.sub-order-view {
  width: 95%;
  margin: 0 auto 0;
  padding-bottom: 50px;

  .address {
    margin-top: 10px;
    background-color: #fff;
    padding: 5px;
  }
}
</style>
